<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
        <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
        <link rel="stylesheet" type="text/css" href="css/codemirror.css">
    </head>
    <body>
 <div class="clojure" data-eval-context="expr">
     (if 1 2 3)
</div>
    <br/>
      <code class="eval-markdown">
# This is a title
`clojure` rocks!
</code>

<h2> HTML rendering in markdown</h2>
<code class="eval-markdown" data-editor-type="html">
# This is a title
`clojure` rocks!
</code>
       <br/>


 <div class="eval-js" data-external-libs="immutable">
     Immutable
        </div>
        <br/>
        <div class="eval-js">
     var m = Immutable.fromJS({a: 10, c: 40});

     m.map(x => x * x);

        </div>
        <br/>

        <div class="eval-js">
            [1, 2, 3].reduce(
              function(total, num){ return total + num }
                , 0);
        </div>
        <br/>
 <div class="eval-js" data-external-libs="jQuery">
     $
        </div>
        <br/>
 
 <div class="eval-js">
     $('div').length
        </div>
        <br/>
 

        <div class="clojure-js" data-static-fns="true">
            (map inc [100000 2 3])
        </div>
        <div class="clojure-js">
            (map inc [100000 2 3])
        </div>
<span class="clojure" data-gist-id="viebel/368d3bec58d3ec47e935ad488bafb600">
</span>
<span class="clojure"> 
           (ns my.ns
              (:require 
              [clojure.string :as string :refer [capitalize] :rename {capitalize CAPITALIZE }]))
                  [(string/blank? "HELLO!!")
                  (CAPITALIZE "klipse")
                  ]
      </span>
      <br/>

        <div class="clojure">
        (
        <span>
        map inc [1 2 3]
        </span>)
        </div>
        <br/>
        <span class="clojure"> (defn foo [x] (* x x)) </span>
        <br/>
        <span class="clojure"> (foo 19) </span>
        <br/>
                   
        <br/>
        <span class="clojure">
            (ns my.gg
                (:require [goog.string :as gstring]))

                (gstring/capitalize "hello")
        </span>

            
            
        <span class="clojure"> (map inc [1 2 3]) </span>
        <br/>
        <span class="clojure"> (zipmap '[a b c] [100 2 3]) </span>
        <br/>
        <span class="clojure"> (map inc [1000 2 3]) </span>
        <br/>
                    
        <br/>
        <div class="clojure">

(ns my.hello$macros) (defmacro hello [x] `(inc ~x)) (my.hello/hello 13)
        </div>
        <br/>

<h2> Lambdaway</h2>
<div class="lambda" data-editor-type="html">
    {+ 1 2 3}
    </div>
    <br/>


<div class="lambda" data-editor-type="html">
    {div {@ style="text-align:center;font:bold 2em georgia;color:red;"} √(3{sup 2}+4{sup 2}) = {sqrt {+ {* 3 3} {* 4 4}}}}
    </div>
    <br/>
<div class="lambda" data-editor-type="html">
    {def amélie {img 
     {@ id="amelie"
         src="http://epsilonwiki.free.fr/lambdaway/data/amelie_poulain.jpg" 
             height="150"
                 title="Amélie Poulain"
                     style="box-shadow:0 0 8px black;
                                border:1px solid white;
                                           -webkit-transform:rotate(-5deg);
                                                         -moz-transform:rotate(-5deg);
                                                                            transform:rotate(-5deg);"}}}
                                                                            {amélie}
    </div>
    <br/>
    <h1> HTML rendering </h1>
   <div class="eval-html" data-editor-type="html">
    &lt;img id="amelie" src="http://epsilonwiki.free.fr/lambdaway/data/amelie_poulain.jpg" height="150" title="Amélie Poulain" style="box-shadow:0 0 8px black; border:1px solid white; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); transform:rotate(-5deg);"&gt;&lt;/img&gt;
    </div>

   
    </script>
        <script>
        window.klipse_settings = {
            codemirror_options_in: {
                lineWrapping: true},
            codemirror_options_out: {
                lineWrapping: true},
            selector: '.clojure',
            selector_eval_markdown: '.eval-markdown',
            selector_eval_html: '.eval-html',
            selector_eval_lambdaway: '.lambda',
            selector_eval_js: '.eval-js',
            selector_js: '.clojure-js'
        };
        </script>
        <script src="fig/js/klipse.fig.js"></script>
    </body>
</html>
